<template>
  <div>
    <ul class="tab-title">
      <li v-for="item in list"
          :class="{ active : tabSelect === item.name}"
          @click.prevent="changeTabs(item.name)"
          :key="item.name"
      >
        <div>
          {{ item.label }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tabSelect",
  data(){
    return{
      list:[
        {label:'工时',name:'1'},
        {label:'巴哥',name:'2'},
        {label:'测试',name:'3'},
        {label:'开发',name:'4'},
      ],
      tabSelect:'1'
    }
  },
  methods:{
    changeTabs(val){
      this.tabSelect = val
    }
  }
}
</script>

<style scoped>
.tab-title .active {
  border-bottom: 5px solid #023486;
  /*background-color: #09f;*/
  color: #023486;
  font-size: 24px;
}
.tab-title {
  display: flex;
  list-style: none;
}

.tab-title li {
  font-size: 24px;
  float: left;
  width: 25%;
  padding: 10px 10px;
  text-align: center;
  border-bottom: 2px solid #002f9b;
  /*background-color: #cccccc;*/
  cursor: pointer;
}
</style>
